<template>
  <RelationSection title="触发点">
    <ManualRelation v-show="relation.relationType === RelationType.manual" :labelWidth="labelWidth" :relation="relation"/>

    <AutoRelation v-show="relation.relationType === RelationType.auto"
      :relationTargetFormDefinition="relationTargetFormDefinition"
      :labelWidth="labelWidth" :formDefinition="formDefinition"
      :relation.sync="relation" @initConfigs="initConfigs"/>

    <DetailsRelation v-show="relation.relationType === RelationType.details"
                  :relationTargetFormDefinition="relationTargetFormDefinition"
                  :labelWidth="labelWidth" :formDefinition="formDefinition"
                  :relation.sync="relation" @initConfigs="initConfigs"/>

  </RelationSection>
</template>
<script>
import RelationSection from '@comp/hhd/design/relation/RelationSection/RelationSection.vue';
import {createProps} from '@/utils';
import {createRelation, RelationType} from '@comp/hhd/design/relation/types';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import ManualRelation from '@comp/hhd/design/relation/ManualRelation/ManualRelation.vue';
import AutoRelation from '@comp/hhd/design/relation/AutoRelation/AutoRelation.vue';
import DetailsRelation from '@comp/hhd/design/relation/DetailsRelation/DetailsRelation.vue';

export default {
  name: 'RelationTypeConfig',
  computed: {
    RelationType() {
      return RelationType;
    }
  },
  components: {DetailsRelation, AutoRelation, ManualRelation, RelationSection},
  props: {
    labelWidth: createProps(String),
    relation: createProps(Object, createRelation),
    formDefinition: createProps(Object, createFormDefinition),
    relationTargetFormDefinition: createProps(Object, createFormDefinition)
  },
  methods: {
    initConfigs() {
      this.$emit('initConfigs');
    },
  }
};
</script>